/* 
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 * 
 * ==|== Import custom fonts for headline ==========================================================
 */
@import url("../fonts/stylesheet.css");
 /*
 * ==|== normalize ==========================================================
 */

/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
footer, header, nav, section {width:100%;}
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; line-height: 1.231; }

body, button, input, select, textarea { font-family:Arial, Helvetica, sans-serif; color: #000; }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #000; font-weight:bold; outline: none; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }




/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */

img {max-width:100%; border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9 
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* 
 * Remove inner padding and border in FF3/4: h5bp.com/l 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* ==|== primary styles =====================================================
   Author: Joseph Wolff - jdwolff.com
   
   ========================================================================== */

/* General page styles */
html, body {
	width:100%; 
	height:100%; 
	overflow:visible;
	background-image:url(../img/paper-bg.png) ;
	background-repeat: no-repeat;
	background-color:#ffcc00;
	-webkit-background-size:200%;
	-moz-background-size:200%;
	background-size:200%;
	color:#000;
	}	
	
/*I hate to be hacky, but something's got to hide that background-image from < IE9 */	
	html, body {
	background-image:none\9;
	}	

.wrap {
	width:89.17197452229299%; 
	max-width:700px;
	position:relative; 
	margin:0 auto; 
	}

/* Resizable paper texture */
#container{
	left:0; 
	top:0; 
	position:absolute; 
	width:100%; 
	height:100%; 
	overflow:visible;
	}
	
h1, h2, .evidence li, aside.surivalKit, nav li a, .manifesto h3, .contact a {
	font-family:'AachenStd', arial, san-serif;
	}
	
h1{
	font-size:2.5em;  /* 40px / 16px */
	line-height:1;
	text-transform:uppercase;
	}

h2{
	font-size:1.75em; /* 28px / 16px */
	line-height:1;
	margin-bottom:0;
	text-transform:lowercase;
	}
	
section {
font-size: .875em; /* 14px / 16px */
padding: 1.071428571428571em 0; /* 15px / 14px */
}
/* Time to make the headers (and nav)*/

#scrollNav{
	min-height:40px;
	position:fixed;
	z-index:9000;
	margin-top:0;
	background:#000;
	letter-spacing:2px;
	}


	
#scrollNav li:first-child {
	margin-right:3.75em; /*60px / 16px */
	}

#scrollNav li {
	float:left;
	margin:0 auto;
	}
	
#scrollNav a{
	color:#ff9933;
	padding:.625em;
	font-size:1em;
	}
	
#scrollNav li.current a, #scrollNav a:hover{
	color:#663300;
	background:#ccc;
	}
	
#top{
	padding-top:40px;
	}
div.header{width:100%;}

header, nav.wrap {
	margin: 0 auto 30px auto;
	}

#logo{padding:30px 0;}

div#logo h1 {
	width:292px;
	height:127px;
	background:url(../img/logo.png);
	}
	
nav li{
	float:left;
	margin:0 auto;
	}

li.connect, li.rapSheet{
	float:right;
	}

li.manifesto, li.rapSheet {
	margin-right: 7.14285714285714%; /* 40px / 700px */
	}

nav li a, nav em {
	display:block;
	color:#000;
	text-decoration:none;
	}
	
nav li a {
	font-size:1.4375em; /* 23px / 16px */
	text-transform:uppercase;
	}

nav li a:visited {color:#000;}
	
nav li a:hover{color:#993300;}



nav li em {
	text-transform:none;
	font-family:Georgia, Arial, serif;
	font-size: 60.9%; /* 14px / 23px */
	font-weight:normal;
	font-style:normal;
	}
	
#subhead h2 {
	font-family:Georgia, Arial, serif;
	font-size: 1em ; /* 16px / 16px */
	text-align:center;
	text-transform:none;
	}
	
/* Manifesto section*/

.manifesto .graphic {
	float:left;
	margin-right:8.68421052631579%; /* 60px / 700px */
	}

.manifesto .copy {
	float:right;
}

.manifesto h1, .manifesto h2, .manifesto h3 {
	text-align:right;
	}

.manifesto h3{
	font-size:1.4375em;
	text-transform:lowercase;
	color:#330000;
	margin:.375em 0 .875em 0;
	}
.manifesto div a{color:#000; text-decoration:none;}
.manifesto div a:hover{text-decoration:underline;}

/* Evidence Section */
section.evidence{
	position:relative;
	width:100%;
	}
	
ul.slides img{float:right;}
div.flex-caption {font-size:.743em;}
div#main .evidence h2{margin:0;}
	
.evidence h3{
	margin:30px 0 10px;
	font-size:1em;  /* 16px / 16px */
	font-weight:bold;
	text-shadow: 1px 1px 2px #333300;filter: dropshadow(color=#333300, offx=1, offy=1);
	}
	
.evidence ul{padding:0;}

.evidence li{
	list-style-type:none;
	font-size:1.25em;  /* 20px / 16px */
	text-shadow: 1px 1px 2px #333300;filter: dropshadow(color=#333300, offx=1, offy=1);
	}

/* Rap Sheet section woo! */

section.rapSheet {
	padding-bottom:0;
}

.rapSheet .copy {
	float:left;
	padding-bottom: 1.142857142857143em;
}

.rapSheet .graphic {float:right;}

.rapSheet .graphic  img {
	position:absolute;
	bottom:0;
	right:0;
	}

/*Survival Kit Aside */

div.surivalKit{
	min-height:265px;
	padding:2.857142857em 0; /*40px / 14px */
	background:url(../img/work-bg1.png) left center repeat-x;
	border-top: solid 1px #333300;
	border-bottom: solid 1px #000;
}

ul#kitContainer{
	width:100%;
	list-style-type:none;
	padding:0;
	}

ul#kitContainer li.clearfix.listing{
	width:25%;
	padding:0;
	float:left;
	list-style-type:none;
	}

ul#kitContainer li.clearfix.listing ul{
	width:100%;
	font-size:60.9%; /*14px / 23px */
	margin-top:1em; /*14px / 14px*/
	padding:0;
	list-style-type:none;
	}
	
aside.surivalKit div.wrap h1, aside.surivalKit div.wrap h2{
	color:#ffcc00;
	}

aside.surivalKit div.wrap h1{
	margin-top:0;
	text-shadow: 5px 5px 1px #290202; filter: dropshadow(color=#290202, offx=5, offy=5);
}

aside.surivalKit li{
	font-size:23px;
	line-height:30px;
	color:#ffcc00;
	text-shadow: 5px 5px 1px #290202; filter: dropshadow(color=#290202, offx=5, offy=5);
	
	}

ul#kitContainer li.clearfix.listing ul li{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	line-height:121.4%; /*17px / 14px */
	font-weight:bold;
	color:#d87902;
	text-shadow: none; filter: dropshadow(color=#000000, offx=0, offy=0);
	}
	
/* Contact section */

section#contact{padding:0;}

section#contact.contact div.contact{
	background:url(../img/contact-bg.png) repeat;
	padding: 1.071428571428571em 0 0 0; /* 15px 0 30px 0 / 14px */
	}

section.contact div.left {
	width:66.4285714%;  /* 465px / 700px */
	float:left;
	position:relative;
	}

form {
	width:69.89247311827957%; /* 325px / 465px */
	float:left;
	}

input, textarea {
	width:90.46153846153846%; /*294px / 325px */
	margin-bottom:1.5em; /* 24px / 16px */
	padding: 0.929em; /* 13px / 14px */
	border: 1px solid #330000;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background:#660000;
	color:#FFF;
	font-weight:bold;
	}
	
textarea{height:150px;}

form p {
	float:left;
	color:#FFF;
	font-family:Georgia, Arial, serif;
	font-weight:bold;
	text-transform:uppercase;
	}
	
#submit {
	float:left;
	width:120px;
	height:48px;
	border:none;
	}

input#submit{background:url(../img/button.png) no-repeat; margin-right:20px;}

input#submit:hover{background-position:0 -48px;}

.error{background:#ffcc00;}
input.error{color:#000;}
*:input {color:#000;}

.contact .left h2 { margin-bottom:0.429em;} /* 5px / 14px */

section.contact div.graphic {
	position:absolute;
	width:21.50537634408602%; /* 100px / 465px */
	bottom:0;
	right:33%;
}

section.contact div.graphic img {
	position:relative;
	}

section.contact div.right {
	float:right;
	width:33.57142857142857%; /* 235px / 700px */
	}
	
section.contact div.right ul {
	float:left;
}
section.contact div.right ul.social {
	float:left;
	padding:35px 0 0 0;
}
section.contact div.right li {
	float:left;
	list-style-type:none;
	}
	
.contact a {
	font-size:1.143em;
	text-transform:uppercase;
	text-decoration:none;
	text-shadow: 1px 1px 2px #333300;filter: dropshadow(color=#333300, offx=1, offy=1);
	}


section.contact div.right ul.social li a {
	width:40px; 
	height:40px;
	display:block;
	background:url(../img/connect-icons-states.png) no-repeat;
	}

li#linkedIn a:hover{background-position: 0 -50px;}	

li#gPlus{margin:0 1.563em; /*25 / 16*/}
li#gPlus a{background-position:-40px 0;}
li#gPlus a:hover{background-position:-40px -50px;}

li#gMail{margin-right:1.563em; /*25 / 16*/}
li#gMail a{background-position:-80px 0;}
li#gMail a:hover{background-position:-80px -50px;}

li#twit a{background-position:-120px 0;}
li#twit a:hover{background-position:-120px -50px;}

div.tweet{padding-bottom:20px;}
div.tweet h2{margin-bottom:.17em;}

/* Footer */
#footer{
	border-top:solid 1px #330;
	background:#600; 
	 }
#footer div{
	width:41.875& /* 402 / 960 */
}

#footer p{
	margin-bottom:0;
	padding-bottom:10px;
	color:#FFF;
	font-weight:bold;
	}

/* Shared styles */
div.copy {border:0;}
.manifesto h2, .rapSheet h2 {
	color:#330000;
	}

section.evidence h2, section.contact h1{
	font-size:1.875em;  /* 30px / 16px */
	
	}

.evidence h2, .contact h1, .contact h2, .contact h2, .contact a{
	text-shadow: 1px 1px 2px #333300;filter: dropshadow(color=#333300, offx=1, offy=1);
}
	
.evidence h1, .evidence h2, .evidence h3, .evidence p, .evidence li, .contact h1, .contact h2, .contact a {
	color:#ffcc00;
	}
	
.manifesto .graphic, .rapSheet .graphic {
	max-width:34.28571428571429%; /* 242px / 700px */
	}

.manifesto .copy, .rapSheet .copy {
	max-width:56.85714285714286%; /* 398px / 700px */
}

#success{
	color:#ffcc00;
	}
/* These precious styles make our Fit Text plugin go */
.ft{
	display:block;
	width:100%;
	max-width:100%;
}
/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }


/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden, h1.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */


/*Teeny tiny for all you non-desktop surfers out there */

@media screen and (max-width: 785px){

	html, body {overflow:visible; background-image:none;}
	#container{overflow:visible;}	
	.wrap {
		width:97%; 
		max-width:400px;
		}
		
	nav.nav li {
		float:none;
		width:73%; /*155px / 400px */
		padding:15px 0;
		margin:10px auto;
		background:#D87902;
		}
	nav li a{text-align:center; }
	nav li a:hover{color:#FFF;}
	
	#scrollNav li:first-child {
	margin-right:0;
	}
	
	section#manifesto div.graphic, section#contact div.graphic{display:none;}
	section#rapSheet div.graphic{float:none; max-width:100%;}
	.rapSheet .graphic img {position:relative; padding-left:40.25%; /*161px / 400px */}
	section#manifesto div.copy, section#rapSheet div.copy{max-width:100%; float:none;}
	.manifesto h1, .manifesto h2, .manifesto h3{text-align:left;}
	
	.flex-container{
		-webkit-background-size:auto 90%;
		-moz-background-size:auto 90%;
		background-size:auto 90%;
		}	
	.flexslider{min-height:185px;}
	div.flex-caption {font-size:.55em;}
	div.flex-caption hgroup h2 { margin-top:0;}
	div.flex-caption h3{margin-top:5px;}
	
	
	
	section.contact div.left, section.contact div.right {
	float:none;
	width:100%;
	}
	div.tweet h2 {clear:left;}
	ul.social{width:100%;}
}

@media screen and (min-width: 1020px){

	.wrap{
		width:94.11764705882353%; 
		max-width:960px;
		}
	#scrollNav li:first-child {
	margin-right:8.125em; /*130px / 16px */
	}
	section{font-size:1em;}
	.manifesto .graphic {margin:0;}
	
.flex-container{
		-webkit-background-size:auto 90%;
		-moz-background-size:auto 90%;
		background-size:auto 90%;
		}	
	div.flex-caption {font-size:.95em;}

	ul#kitContainer li.clearfix.listing ul li {font-size:1.452em;}
	
	div.tweet h2 {clear:left;}
	.manifesto .copy, .rapSheet .copy {max-width:60%; /* 576px / 960px */}
	
}
 /* 1200? OVER 9000! */
@media  screen and (min-width: 1280px) {
	.wrap{
		width:95%; 
		max-width:1140px;
		}
	nav{margin-top:-93px;}
	div.flex-caption {font-size:1em;}
	.manifesto .copy, .rapSheet .copy {max-width:64.03508771929825%; /* 730px / 1140px */}
	section#contact.contact div.contact{height:100%;}
	#contact h1{margin:0.511em auto;}
}



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
@media print {

  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

